<template>
  <div class="foodManage">
    <CommonTabs :tabList="tabList" v-model="activeName"></CommonTabs>
    <div class="foodManageContent">
      <div class="search">
        <el-form :model="searchForm" label-width="80px" :inline="true" ref="form">
          <el-form-item prop="name" label="菜品名称">
            <CommonInput v-model="searchForm.name" :placeholder="'请输入菜品名称'"></CommonInput>
          </el-form-item>
          <el-form-item prop="categoryName" label="菜品分类">
            <CommonSelect v-model="searchForm.categoryName" :options="categoryList" :placeholder="'请选择菜品分类'">
            </CommonSelect>
          </el-form-item>
          <el-form-item prop="status" label="菜品状态">
            <CommonSelect v-model="searchForm.status" :options="stateList" :placeholder="'请选择菜品状态'"></CommonSelect>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button @click="handleAddFood">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <CommonTable :columns="foodManageColumns" :table-data="tableData" :pagination="pagination" style="flex: 1">
        <template #status="{ row }">
          <span :class="[row.status == 'available' ? 'ing' : 'stop']">
            {{ row.status == 'available' ? '在售' : '停售' }}
          </span>
        </template>
        <template #img="{ row }">
          <!-- <img class="row-img" :src="assetUrl + row.imageUrl" alt=""> -->
          <el-image style="width: 100px; height: 100px" :src="assetUrl + row.imageUrl"
            :preview-src-list="[assetUrl + row.imageUrl]" :fit="'fill'"></el-image>
        </template>
        <template #edit="{ row }">
          <el-button type="text" class="edit" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" class="del" @click="handleDel(row)">删除</el-button>
          <el-button type="text" class="stop" @click="handleStop(row)">下架</el-button>
          <el-button type="text" class="start"@click="handleStart(row)">启用</el-button>
        </template>
      </CommonTable>
    </div>
    <ChangeDialog v-if="changeDialogShow" :changeDialogShow.sync="changeDialogShow" :curRow="curRow"
      @makeSure="handleMakeSure">
    </ChangeDialog>
    <DelDialog v-if="delShow" :delShow.sync="delShow" @makeSure="makeSure" :width="'100'"></DelDialog>
  </div>
</template>

<script>
import { foodManageColumns } from "./columns"
import ChangeDialog from "./components/changeDialog.vue"
import DelDialog from "./components/delDialog.vue"
import utils from "@/utils/index"
// 接口
import { addFoodInfo, getTablePage, delFoodInfo, categoryNameList, changeFoodState } from "@/api/foodManage"
export default {
  components: {
    ChangeDialog,
    DelDialog
  },
  data() {
    return {
      name: '',
      assetUrl: '',
      searchForm: {
        name: '',
        categoryName: '',
        status: '',
      },
      tableData: [

      ],
      stateList: [{
        label: '在售',
        value: 'available'
      },
      {
        label: '停售',
        value: 'unavailable'
      }],
      // 分页器信息
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 10,
      },
      tabList: [
        {
          label: '菜品管理',
          name: 'foodManage',
        }
      ],
      activeName: 'foodManage',
      foodManageColumns,//表头列
      categoryList: [

      ],
      changeDialogShow: false,
      curRow: {},
      delShow: false,
      tableData: [],
    };
  },

  mounted() {
    this.getTableData()
    this.getCategoryList()
    this.assetUrl = process.env.VUE_APP_ASSETSURL

  },

  methods: {
    // 获取菜品分类
    async getCategoryList() {
      const res = await categoryNameList()
      this.categoryList = res.data.map(item => {
        return {
          label: item,
          value: item
        }
      })
    },
    async getTableData() {
      let data = {
        page: {
          ...this.pagination
        },
        param: {
          name: this.searchForm.name,
          categoryName: this.searchForm.categoryName,
          status: this.searchForm.status
        }
      }
      console.log(data, 'data');

      const res = await getTablePage(data)
      console.log(res.data.records, 'rr');
      this.tableData = res.data.records
      this.pagination.total = res.data.total * 1
    },
    setPage(v) {
      this.pagination.pageNum = v
      this.getTableData()
    },
    setSize(v) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = v
      this.getTableData()
    },
    handleAddFood() {
      this.curRow = {}
      this.changeDialogShow = true
    },
    handleEdit(row) {
      this.curRow = row
      this.changeDialogShow = true
    },
    handleDel(row) {
      this.curRow = row
      this.delShow = true
    },
    async makeSure() {
      console.log(this.curRow);

      const res = await delFoodInfo({
        id: this.curRow.id
      })
      if (res.code == 200) {
        utils._msgBox('删除成功！', 'success')
        this.getTableData()
      } else {
        utils._msgBox('删除失败！', 'error')

      }
    },
    async handleMakeSure(v) {
      this.changeDialogShow = false
      // if(v.id){

      // }else{

      // }
      const res = await addFoodInfo(v)
      console.log(res, 'res');
      if (res.code == 200) {
        utils._msgBox(`${v.id ? '编辑' : '新增'}菜品成功！`, 'success')
        this.getTableData()
      } else {
        utils._msgBox(`${v.id ? '编辑' : '新增'}菜品失败！`, 'error')
      }
      this.getTableData()
      this.getCategoryList()


    },
    handleSearch() {
      this.getTableData()
    },
    handleReset() {
      this.$refs.form.resetFields();
      this.getTableData()
    },
    async handleStop(v) {
      this.curRow = v
      let data = {
        id: v.id,
        status: '0'
      }
      const res = await changeFoodState(data)
      if (res.code == 200) {
        utils._msgBox('下架成功！', 'success')
      } else {
        utils._msgBox('下架失败！', 'error')
      }
      this.getTableData()
    },
    async handleStart(v) {
      this.curRow = v
      let data = {
        id: v.id,
        status: '1'
      }
      const res = await changeFoodState(data)
      if (res.code == 200) {
        utils._msgBox('启用成功！', 'success')
      } else {
        utils._msgBox('启用失败！', 'error')
      }
      this.getTableData()
    }
  },
};
</script>

<style lang="less" scoped>
.foodManage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .foodManageContent {
    flex: 1;
    display: flex;
    flex-direction: column;

    .ing {
      color: rgb(34, 202, 104);
    }

    .stop {
      color: #e75511;
    }

    .row-img {
      width: 100px;
      height: 100px;

    }

    .title {
      line-height: 25px;
      padding: 16px 0 12px 0;
      text-align: center;
      font-size: 18px;
      font-weight: bolder;
    }

    .search {
      padding: 0 24px;

      .el-button {
        width: 74px;
        height: 32px;
        padding: 0;
        text-align: center;
        background: #155bd4;
        border-radius: 2px;
        border: 1px solid #dcdee0;
        color: #fff;

        span {
          line-height: 32px;
        }

        &:hover {
          // color: #155bd4;
          // background: #edf4ff;
          border: 1px solid #155bd4;
        }
      }
    }

    .el-table__row {
      .activeText {
        cursor: pointer;
        // color: var(--active-text-color);
      }
    }
  }
}
</style>